<template>
    <admin-framework :breadcrumb="breadcrumb" :title="breadcrumb.title">
        <collapse-panel class="panel-success" :title="breadcrumb.title">
            <div class="clearfix">
                <div class="form-group">
                    <label class="control-label">Input addons</label>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <icon class="fa-search"/>
                        </span>
                        <input type="text" class="form-control" v-model="search" @keyup.enter="searchClick">
                        <span class="input-group-btn">
                            <button class="btn btn-warning" type="button" @click="searchClick">搜索</button>
                        </span>
                    </div>
                </div>
            </div>
            <advanced-table class="table-bordered table-hover" :head="head" :redirect-pagination="redirectPage"
                            :current-page="users.current_page" :total-page="users.last_page" :insert="insertUser">
                <tr v-for="(user, index) in users.data" :key="index" :data-id="user.id" :data-name="user.name">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>
                        <image-popups :src="user.avatar" :origin-src="user.avatar" type="users" width="25" height="25"/>
                    </td>
                    <td>{{user.created_at}}</td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <router-link class="fa fa-edit btn btn-success"
                                         :to="{name: 'UserEdit', query: {id: user.id}}"/>
                            <button class="fa fa-trash-o btn btn-danger" @click="deleteUser"></button>
                        </div>
                    </td>
                </tr>
            </advanced-table>
        </collapse-panel>
        <load-animation :load="load" :timeout="5000"/>
        <modal :show="insertModal" :onsubmit="insertModalSubmit" title="创建用户">
            <input-label v-model="insertData.name" type="text" label="Name"/>
            <input-label type=email v-model="insertData.email" label="email"/>
            <input-label type="password" v-model="insertData.password" label="Password"/>
            <div class="form-group">
                <label class="btn-block">Avatar</label>
                <img :src="insertData.avatar" v-if="insertData.avatar !== '' && insertData.avatar !== null"
                     class="img-rounded" width="100" height="100"/>
                <upload-file url="/file/upload/image" v-model="insertData.avatar" class="btn-block m-t-5">
                    <button class="btn btn-success fa fa-upload"></button>
                </upload-file>
            </div>
        </modal>
    </admin-framework>
</template>

<script>
	/* eslint-disable no-undef */

	import AdminFramework from '../../layout/framework/AdminFramework';
	import CollapsePanel from 'vue-fiu-ui/src/main/js/components/panel/CollapsePanel';
	import AdvancedTable from 'vue-fiu-ui/src/main/js/components/table/AdvancedTable';
	import LoadAnimation from 'vue-fiu-ui/src/main/js/components/animation/Loading';
	import ImagePopups from 'vue-fiu-ui/src/main/js/components/widget/ImagePopups';
	import Icon from 'vue-fiu-ui/src/main/js/components/widget/Icon';
	import Modal from 'vue-fiu-ui/src/main/js/components/widget/Modal';
	import InputLabel from 'vue-fiu-ui/src/main/js/components/input/InputLabel';
	import UploadFile from 'vue-fiu-ui/src/main/js/components/widget/UploadFile';

	export default {
		components: {
			UploadFile,
			InputLabel,
			Modal,
			Icon,
			ImagePopups,
			LoadAnimation,
			AdvancedTable,
			CollapsePanel,
			AdminFramework
		},
		data () {
			return {
				breadcrumb: {
					title: '用户列表',
					links: [
						{
							label: 'Home',
							url: {name: 'Home'}
						}, {
							end: true,
							label: 'Users',
							url: '#'
						}
					]
				},
				head: [
					{label: '#'},
					{label: 'Aame'},
					{label: 'Email'},
					{label: 'Avatar'},
					{label: 'Created At'},
					{label: 'Action'}
				],
				users: {
					current_page: 1,
					last_page: undefined,
					data: []
				},
				load: false,
				search: '',
				insertModal: false,
				insertData: {
					name: '',
					email: '',
					password: '',
					avatar: ''
				}
			};
		},
		methods: {
			initUsers () {
				this.load = true;
				axios.get('/admin/user/list', {params: {page: this.users.current_page, q: this.search}}).then(res => {
					if (res.data.success === false) return this.$notify.error(res.data.data);
					this.load = false;
					this.users = res.data.data;
				});
			},
			insertUser () {
				this.insertModal = false;
				this.$nextTick(() => {
					this.insertModal = true;
				});
			},
			redirectPage (page) {
				this.users.current_page = parseInt(page);
				this.initUsers();
			},
			searchClick () {
				this.users.current_page = 1;
				this.initUsers();
			},
			insertModalSubmit () {
				axios.post('/user', this.insertData).then(res => {
					if (res.data.success === false) return this.$notify.error(res.data.data);
					this.insertModal = false;
					this.$notify.success(res.data.data);
					this.initUsers();
				});
			},
			deleteUser (e) {
				let data = this.$util.getTrData(e);
				this.$modal.open({
					title: '是否删除？',
					content: data.name
				}, (el, ml) => {
					ml.modal('hide');
					axios.delete('/user/' + data.id).then(res => {
						if (res.data.success === false) return this.$notify.error(res.data.data);
						this.$notify.success(res.data.data);
						this.initUsers();
					});
				});
			}
		},
		mounted () {
			this.initUsers();
		}
	};
</script>

<style scoped lang="scss">

</style>
